@import "../../less/@name";
.couponItem{
  width:100%;
  padding: 1em 1em 0 1em;
  position: relative;
  &.active{
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
  }
  &>div{
    position: relative;
    background: @bg-white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    &:before{
      content: "";
      width:20px;
      height:20px;
      border-radius: 50%;
      background: @bg;
      border-right: 1px solid @line;
      position: absolute;
      left: -10px;
      top:50%-10px;
    }
    &:after{
      content: "";
      width:20px;
      height:20px;
      border-radius: 50%;
      background: @bg;
      border-left: 1px solid @line;
      position: absolute;
      right:-10px;
      top:50%-10px;
    }
    .couponItemLeft{
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content:center;
      &>.img{
        margin: 1em 0 1em 2em;
        width:80px;
        height:80px;
        //-ms-filter: grayscale(100%);
        //filter: grayscale(100%);
      }
      &>span{
        margin-left: 1em;
        height:100%;
        &>div{
          height:50%;
          display: flex;
          flex-direction:column;
          justify-content: center;
          h4{
            color:@color-main-1;
            flex-direction: row;
            display: flex;
            align-items: flex-end;
            span{
              font-size: @font-size-t;
            }
            .Num{
              height:32.8px;
              display: inline-block;
              font-size: 2.4em;
            }
          }
          p{
            color: @color-main-2;
          }
        }
        &>span{
          display: flex;
          flex-direction:column;
          margin-top: 1em;
          p{}
        }
      }
    }
    .couponItemRightBtn{
      width:29.5%;
      border-left: 2px dashed @line;
      a{
        justify-content: center;
        align-items: center;
        span{
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          width:68px;
          height:20px;
          color: @color-main-1;
          border: 1px solid @color-main-2;
        }
      }
    }
    .couponItemRightLabel{
      width:29.5%;
      border-left: 2px dashed @line;
      align-items: center;
      display: flex;
      justify-content:center;
      label{
        display: flex;
        width:40px;
        height:40px;
        border: 2px solid @color-main-2;
        align-items: center;
        justify-content: center;
        color: @color-main-2;
        border-radius: 50%;
      }
    }
  }
  &>label{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top:1em;
    right: 28%;
    span{
      width: 24px;
      height:62px;
      &:after{
        position: absolute;
        top:38px;
        content: "";
        height:0;
        width:0;
        border:12px solid transparent;
        border-bottom-color: @bg-white;
      }
    }
    p{
      color: @bg-white;
      width:12px;
      position: absolute;
    }
  }
}